<template>
  <div>
    <div class="container">
      <div class="header">
        <div class="item">
          <div>已登录</div>
          <div>{{total}}</div>
        </div>
        <div class="item">
          <div>最近连续登录/天</div>
          <div>{{distantLogin}}</div>
        </div>
        <div class="item">
          <div>今日访客</div>
          <div>{{todayPass}}</div>
        </div>
      </div>
      <div class="boxContainer">
        <el-tooltip v-for="item in loginArr" :key="item.day" :enterable="false" :content="`${item.day},${item.login?'已':'未'}登录`">
          <div class="loginBox" :class="{'activeBox': item.login}"></div>
        </el-tooltip>
      </div>
    </div>
  </div>
</template>

<script>
import getLoginDays, { getDistantDay } from '../utils/computeDay'
export default {
  data () {
    return {
      loginArr: [],
      total: 0,
      distantLogin: 0,
      todayPass: 0
    }
  },
  methods: {
    async getLoginDay () {
      const {data: res} = await this.$http.get('/action/actions')
      this.total = res.length
      this.todayPass = res[res.length - 1].pass
      const arr = getLoginDays(res)
      this.loginArr = arr
      this.distantLogin = this.getDistantDay(res)
    },
    getDistantDay
  },
  created () {
    this.getLoginDay()
  }
}
</script>

<style scoped lang="less">
.container {
  display: flex;
  align-items: center;
  flex-direction: column;
  .header {
    display: flex;
    width: 50%;
    justify-content: space-between;
    .item {
      display: flex;
      flex-direction: column;
      align-items: center;
    }
  }
}
.loginBox {
  box-sizing: border-box;
  padding: 5px;
  background-color: #e3e3e3;
  background-clip: content-box;
  height:20px;
  flex: 5%;
}
.activeBox {
  background-color: #5a9cf8;
}
.boxContainer {
  display: flex;
  flex-wrap: wrap;
  width: 500px;
}
</style>
